<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
		<!--2.自定义两组样式,来控制 transition 内部的元素实现动画-->
		<style>
			/**
			 * v-enter:[这是一个时间点] 是进入之前，元素的起始状态，此时动画还没有开始进入
			 * v-leave-to:[这是一个时间点] 是动画离开之后的终止状态，此时元素动画已经结束
			 */
			.v-enter,.v-leave-to{
				opacity:0;  /*表示动画结束*/
				transform:translateX(100px) ; /*表示动画相对原位置开始的起始位置*/
			}
			/**
			 * v-enter-active：入场动画的时间段
			 * v-leave-active：离场动画的时间段
			 */
			.v-enter-active,
			.v-leave-active{
				transition:all 1s ease;
			}
		</style>
	</head>
	<!--
    	动画学习官方文档:https://cn.vuejs.org/v2/guide/transitions.html   	
   -->
	
	<body>
		<!--需求：点击按钮：标签h3里的内容 出现，在点击:隐藏-->
		<div id="app">
			<input type="button" value="点击" @click="flag=!flag" />
			<!--
            	1.使用 Vue官方提供的transition元素，把需要被动画控制的元素，包裹起来
            -->
            <transition>
			<h3 v-show="flag">h3标签显示</h3>
			</transition>
		</div>
	</body>
	<script>
		var vue=new Vue({
			el:"#app",
			data:{
				flag:false
			},
			methods:{
				
			}
		});
	</script>
</html>